<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="550px">
      <el-form ref="formData" :rules="rules" :model="formData" label-width="120px" size="small">
        <el-form-item prop="channel" label="渠道">
          <el-input v-model="formData.channel"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item prop="age" label="年龄">
          <el-input-number v-model="formData.age" :min="16"></el-input-number>
        </el-form-item>
        <el-form-item prop="applyPosition" label="应聘岗位">
          <el-input v-model="formData.applyPosition"></el-input>
        </el-form-item>
        <el-form-item prop="degree" label="学历">
          <el-input v-model="formData.degree"></el-input>
        </el-form-item>
        <el-form-item prop="politicCountenance" label="政治面貌">
          <el-select v-model="formData.politicCountenance" clearable filterable>
            <el-option label="初级职位" value="初级职位"></el-option>
            <el-option label="中共预备党员" value="中共预备党员"></el-option>
            <el-option label="共青团员" value="共青团员"></el-option>
            <el-option label="民bai革党员" value="民bai革党员"></el-option>
            <el-option label="民盟盟bai员" value="民盟盟bai员"></el-option>
            <el-option label="民建会员" value="民建会员"></el-option>
            <el-option label="民进会员" value="民进会员"></el-option>
            <el-option label="农工党党员" value="农工党党员"></el-option>
            <el-option label="致公党党员" value="致公党党员"></el-option>
            <el-option label="九三学社社员" value="九三学社社员"></el-option>
            <el-option label="台盟盟员" value="台盟盟员"></el-option>
            <el-option label="无党派人士" value="无党派人士"></el-option>
            <el-option label="群众" value="群众"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="graduateSchool" label="毕业院校">
          <el-input v-model="formData.graduateSchool"></el-input>
        </el-form-item>
        <el-form-item prop="major" label="专业">
          <el-input v-model="formData.major"></el-input>
        </el-form-item>
        <el-form-item prop="categoryId" label="人才分类">
          <el-select v-model="formData.categoryId" clearable filterable>
            <el-option label="初级职位" :value="1"></el-option>
            <el-option label="中级职位" :value="2"></el-option>
            <el-option label="高级职位" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="remarks" label="备注">
          <el-input v-model="formData.remarks"></el-input>
        </el-form-item>
        <el-form-item prop="curriculumVitae" label="简历上传">
          <el-upload
            action
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="httpRequest"
            :file-list="fileList"
            :on-preview="onPreview"
            :on-remove="onRemove"
          >
            <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm('formData')"
          size="small"
          :disabled="loading"
          :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveTalentPool, uploadFiles } from "@/api/talentPool";
export default {
  data() {
    return {
      open: false,
      formData: {},
      loading: false,
      title: "",
      rules: {
        channel: [{ required: true, message: "请输入渠道", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        applyPosition: [{ required: true, message: "请输入应聘岗位", trigger: "blur" }],
        politicCountenance: [{ required: true, message: "请输入政治面貌", trigger: "change" }],
        graduateSchool: [
          { required: true, message: "请输入毕业院校", trigger: "blur" }
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        categoryId: [
          { required: true, message: "请输选择人才分类", trigger: "change" }
        ],
        curriculumVitae: [
          {
            required: true,
            message: "请输上传简历",
            trigger: ["change", "blur"]
          }
        ]
      },
      fileList: []
    };
  },
  methods: {
    add() {
      this.fileList = []
      this.title = "新增";
      this.open = true;
      this.formData = this.form();
    },
    edit(rows) {
      const row = JSON.parse(JSON.stringify(rows));
      this.title = "编辑";
      this.formData = row;
      this.fileList = []
      this.fileList.push({name:row.curriculumVitae,url:row.curriculumVitae})
      this.open = true;
    },
    form() {
      return {
        channel: "",
        name: "",
        age: "",
        applyPosition: "",
        degree: "",
        politicCountenance: "",
        graduateSchool: "",
        major: "",
        remarks: "",
        curriculumVitae: ""
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          saveTalentPool(this.formData).then(res => {
            this.loading = false;
            if (res.data.code === this.ERR_OK) {
              this.$message.success(res.data.msg);
              this.open = false;
              this.$emit("load");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    ///文件操作
    httpRequest(params) {
      const file = params.file;
      const form = new FormData();
      // 文件对象
      form.append("file", file);
      uploadFiles(form).then(res => {
        if (res.data.code === this.ERR_OK) {
          this.formData.curriculumVitae = res.data.data;
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onPreview(file){
      window.open(file.url);
    },
    onRemove(file, fileList){
      this.formData.curriculumVitae = ''
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor,.el-select {
  width: 100%;
}
</style>